<template>
  <div>
    <div id="main3" style="width: 500px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["myType"],
  data() {
    return {
      type: this.myType,
    };
  },
  mounted() {
    console.log(this.type);
    if (this.type == 1) {
      console.log("draw 本科生");
    } else if (this.type == 2) {
      console.log("draw 研究生");
    }
    this.get_direction();
  },
  methods: {
    get_direction() {
      this.axios({
        url: "grad/direction",
        method: "get",
        params: {
          start: 2020,
          end: 2020,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          if (this.type == 1) {
            //本科生
            console.log(res.data.data.bachelor);
          } else {
            //研究生
            console.log(res.data.data.master);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      this.myChart = echarts.init(document.getElementById("main3"));
      this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        toolbox: {
          x: 975,
          feature: {
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: [
            "国内",
            "出国（出境）",
            "协议和合同就业",
            "待就业",
            "拟继续深造",
            "待定",
            "其他",
          ],
        },
        series: [
          {
            name: "毕业去向",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "升学" },
              { value: 775, name: "就业" },
              { value: 679, name: "未就业", selected: true },
            ],
          },
          {
            name: "毕业去向",
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                series: [
                  {
                    name: "毕业去向",
                    type: "pie",
                    selectedMode: "single",
                    radius: [0, "30%"],
                    label: {
                      position: "inner",
                      fontSize: 14,
                    },
                    labelLine: {
                      show: false,
                    },
                    data: [
                      { value: 1548, name: "升学" },
                      { value: 775, name: "就业" },
                      { value: 679, name: "未就业", selected: true },
                    ],
                  },
                  {
                    name: "毕业去向",
                    type: "pie",
                    radius: ["45%", "60%"],
                    labelLine: {
                      length: 30,
                    },
                    label: {
                      formatter:
                        "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
                      backgroundColor: "#F6F8FC",
                      borderColor: "#8C8D8E",
                      borderWidth: 1,
                      borderRadius: 4,

                      rich: {
                        a: {
                          color: "#6E7079",
                          lineHeight: 22,
                          align: "center",
                        },
                        hr: {
                          borderColor: "#8C8D8E",
                          width: "100%",
                          borderWidth: 1,
                          height: 0,
                        },
                        b: {
                          color: "#4C5058",
                          fontSize: 14,
                          fontWeight: "bold",
                          lineHeight: 33,
                        },
                        per: {
                          color: "#fff",
                          backgroundColor: "#4C5058",
                          padding: [3, 4],
                          borderRadius: 4,
                        },
                      },
                    },
                    data: [
                      { value: 1048, name: "国内" },
                      { value: 335, name: "出国（出境）" },
                      { value: 310, name: "协议和合同就业" },
                      { value: 251, name: "灵活就业" },
                      { value: 234, name: "拟继续深造" },
                      { value: 147, name: "待就业" },
                    ],
                  },
                ],
              },
            },
          },
        ],
      });
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
};
</script>

<style scope>
/* .pie-wrap{
        width:100%;
        height:650px;
    } */
</style>
